<template>
    <div>
        <router-view />
        <el-row>
            <el-col :span="22">
                <!-- 条件查询-->
                <el-form
                    :inline="true"
                    :model="searchForm"
                    class="demo-form-inline"
                    style="margin: 0px"
                >
                    <el-form-item label="姓名">
                        <el-input
                            v-model="searchForm.searchName"
                            placeholder="请输入姓名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="讲师级别">
                        <el-select
                            clearable
                            v-model="searchForm.searchLevel"
                            placeholder="请选择讲师级别"
                        >
                            <el-option label="高级讲师" value="1"></el-option>
                            <el-option label="首席讲师" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="initTeacher()"
                    >查询</el-button
                >
            </el-col>
        </el-row>
        <!-- 表格显示-->
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="name" label="讲师姓名" width="100">
            </el-table-column>
            <el-table-column prop="career" label="讲师资历" width="100">
            </el-table-column>
            <el-table-column
                prop="level"
                label="头衔"
                :formatter="level"
                width="100"
            >
            </el-table-column>
            <el-table-column prop="gmtCreate" label="添加时间" width="200">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="100">
            </el-table-column>
            <el-table-column prop="avatar" label="讲师头像" width="750">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="200"
                align="center"
            >
                <template slot-scope="scope">
                    <!--通过路由来进行修改显示-->
                    <router-link :to="'/teacher/edit/' + scope.row.id">
                        <el-button
                            icon="el-icon-edit"
                            type="primary"
                            size="small"
                            >修改</el-button
                        >
                    </router-link>
                    <el-button
                        icon="el-icon-delete"
                        type="danger"
                        size="small"
                        @click="delTeacher(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页-->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.pageNumber"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import teacher from '@/api/teacher/teacher.js'

export default {
    data() {
        return {
            list: [],
            searchForm: {},
            page: {
                pageNumber: 1,
                pageSize: 3,
                total: 0
            },
            Teacher: {},
            dialogFormVisible: false
        }
    },
    methods: {
        level(row) {
            return row.level == 1 ? '高级讲师' : '首席讲师'
        },
        delTeacher(id) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    teacher
                        .del(id)
                        .then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '成功删除'
                                })
                                this.initTeacher()
                            }
                        })
                        .catch(function(reason) {
                            alert('错误')
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        initTeacher() {
            teacher
                .page(this.page.pageNumber, this.page.pageSize, this.searchForm)
                .then(result => {
                    this.list = result.data.row
                    console.log(this.list)
                    this.page.total = result.data.total
                    if (this.list.length === 0 && this.page.total < 1) {
                        this.page.pageNumber =
                            Math.floor(
                                (this.page.total - 1) / this.page.pageSize
                            ) + 1
                        this.initTeacher()
                    }
                })
                .catch(function(reason) {
                    alert('错误')
                })
        },
        handleSizeChange(val) {
            this.page.pageNumber = 1
            this.page.pageSize = val
            this.initTeacher()
        },
        // 当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.page.pageNumber = val
            this.initTeacher()
        },
        open1(msg) {
            this.$message(msg)
        }
    },
    created() {
        this.initTeacher()
    },
    watch: {
        searchForm: {
            deep: true,
            handler: function() {
                this.initTeacher()
            }
        },
        dialogFormVisible() {
            if (this.dialogFormVisible === false) {
                this.Teacher = {}
            }
        }
    }
}
</script>

<style>
</style>
